﻿<UserControl x:Class="WpfControls.ColorPicker"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfControls"
    xmlns:effect="clr-namespace:ShaderEffects;assembly=ShaderEffects"
    Height="100" Width="200">
  <GroupBox Header="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ColorPicker}}, Path=Title}">
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition x:Name="TextColumn" Width="30" />
        <ColumnDefinition />

      </Grid.ColumnDefinitions>

      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
      </Grid.RowDefinitions>

      <Grid.Resources>
        <local:ByteToDoubleConverter x:Key="byteToDouble" />
        <local:ColorGradientConverter x:Key="colorGradientConverter" />

        <RadialGradientBrush x:Key="ThumbCoverBrush" GradientOrigin="0.2,0.2">
          <GradientStop Color="White" Offset="0" />
          <GradientStop Color="Transparent" Offset="1" />
        </RadialGradientBrush>

        <Style x:Key="ThumbStyle"  TargetType="{x:Type Thumb}">
          <Setter Property="SnapsToDevicePixels" Value="true"/>
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type Thumb}">
                <Grid>
                  <Ellipse Stretch="Fill" Fill="{TemplateBinding Background}" />
                  <Ellipse Stretch="Fill" Stroke="Black" Fill="{StaticResource ThumbCoverBrush}" />
                </Grid>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>

        <ControlTemplate x:Key="SliderTemplate" TargetType="{x:Type Slider}">
          <Grid>
            <Rectangle Height="7" Margin="5,0" Stroke="Black" StrokeThickness="1" RadiusX="2" RadiusY="2" Fill="White">
              <Rectangle.Effect>
                <effect:CheckerboardEffect ColorFilter="Gray"/>
              </Rectangle.Effect>
            </Rectangle>
            <Rectangle Height="7" Margin="5,0" Stroke="Black" StrokeThickness="1" RadiusX="2" RadiusY="2" Fill="{TemplateBinding Background}"/>
            <Track Name="PART_Track">
              <Track.Thumb>
                <Thumb x:Name="SliderThumb" Width="13" Height="13" Background="{TemplateBinding Foreground}" Style="{StaticResource ThumbStyle}">
                </Thumb>                
              </Track.Thumb>             
            </Track>
          </Grid>          
          
          <ControlTemplate.Triggers>
            <Trigger Property="UIElement.IsMouseOver" Value="True">
              <!-- TODO add some stuff -->
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>

        <Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
          <Setter Property="VerticalAlignment" Value="Center"/>
          <Setter Property="Template" Value="{StaticResource SliderTemplate}" />
          <Setter Property="IsMoveToPointEnabled" Value="True"/>
          <Setter Property="Minimum" Value="0.0" />
          <Setter Property="Maximum" Value="255.0" />
        </Style>

        <Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
          <Setter Property="VerticalAlignment" Value="Center"/>
          <Setter Property="Width" Value="{Binding ElementName=TextColumn, Path=Width}"/>
        </Style>

      </Grid.Resources>

      <Slider x:Name="RedSlider" Grid.Row="0" Style="{StaticResource SliderStyle}" Foreground="Red"
              Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ColorPicker}}, Path=Red, Mode=TwoWay}"
              Background="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ColorPicker}}, Path=Color,
                                   Converter={StaticResource colorGradientConverter}, ConverterParameter=Red}"/>
             
      <Slider x:Name="GreenSlider" Grid.Row="1" Style="{StaticResource SliderStyle}" Foreground="Green"              
              Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ColorPicker}}, Path=Green, Mode=TwoWay}"
              Background="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ColorPicker}}, Path=Color,
                                   Converter={StaticResource colorGradientConverter}, ConverterParameter=Green}"/>
      
      <Slider x:Name="BlueSlider" Grid.Row="2" Style="{StaticResource SliderStyle}" Foreground="Blue" 
              Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ColorPicker}}, Path=Blue, Mode=TwoWay}"
              Background="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ColorPicker}}, Path=Color,
                                   Converter={StaticResource colorGradientConverter}, ConverterParameter=Blue}"/>
      
      <Slider x:Name="AlphaSlider" Grid.Row="3" Style="{StaticResource SliderStyle}" Foreground="Silver" 
              Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ColorPicker}}, Path=Alpha, Mode=TwoWay}"
              Background="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ColorPicker}}, Path=Color,
                                   Converter={StaticResource colorGradientConverter}, ConverterParameter=Alpha}"/>
      
      <TextBox Grid.Column="1" Grid.Row="0" Style="{StaticResource TextBoxStyle}" 
               Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ColorPicker}}, Path=Red, Mode=TwoWay}"/>
      <TextBox Grid.Column="1" Grid.Row="1" Style="{StaticResource TextBoxStyle}" 
               Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ColorPicker}}, Path=Green, Mode=TwoWay}"/>
      <TextBox Grid.Column="1" Grid.Row="2" Style="{StaticResource TextBoxStyle}" 
               Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ColorPicker}}, Path=Blue, Mode=TwoWay}"/>
      <TextBox Grid.Column="1" Grid.Row="3" Style="{StaticResource TextBoxStyle}" 
               Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ColorPicker}}, Path=Alpha, Mode=TwoWay}"/>

      <Border Grid.Column="2" Grid.RowSpan="4" BorderBrush="Black" BorderThickness="1" Margin="10,10">
        <Border.Background>
          <SolidColorBrush Color="White"/>
        </Border.Background>
        <Border.Effect>
          <effect:CheckerboardEffect ColorFilter="Gray"/>
        </Border.Effect>
      </Border>
      <Border x:Name="ColorBorder" Grid.Column="2" Grid.RowSpan="4" BorderBrush="Black" BorderThickness="1" Margin="10,10">    
        <Border.Background>
          <SolidColorBrush Color="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ColorPicker}}, Path=Color}"/>
        </Border.Background>        
      </Border>
    </Grid>
  </GroupBox>
</UserControl>
